<template>
  <div class="lakala-container">
    <div class="lakala-header">
      <h2>拉克拉电子合同申请</h2>
      <p>拉克拉电子合同服务，提供便捷的合同签署解决方案</p>
    </div>

    <div class="lakala-content">
      <a-card title="功能说明" class="info-card">
        <p>• 在线电子合同申请</p>
        <p>• 数字签名服务</p>
        <p>• 合同状态跟踪</p>
        <p>• 法律效力保障</p>
      </a-card>

      <a-card title="申请流程" class="process-card">
        <a-steps :current="0" direction="vertical">
          <a-step title="填写申请信息" description="完善合同基本信息" />
          <a-step title="上传相关资料" description="提交必要的证明文件" />
          <a-step title="电子签名" description="双方进行电子签名确认" />
          <a-step title="合同生效" description="合同正式生效，具备法律效力" />
        </a-steps>
      </a-card>

      <div class="action-area">
        <a-button type="primary" size="large" @click="handleApply">
          开始申请
        </a-button>
        <a-button size="large" @click="handleViewStatus">
          查看状态
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { message } from 'ant-design-vue'
import {useRouter} from 'vue-router'

const router = useRouter()

const handleApply = () => {
  router.push('/more/lakala-apply')
}

const handleViewStatus = () => {
  message.info('功能开发中，敬请期待')
}
</script>

<style scoped>
.lakala-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.lakala-header {
  text-align: center;
  margin-bottom: 32px;
}

.lakala-header h2 {
  font-size: 28px;
  color: #1890ff;
  margin-bottom: 8px;
}

.lakala-header p {
  font-size: 16px;
  color: #666;
}

.lakala-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

.info-card,
.process-card {
  height: fit-content;
}

.info-card p {
  margin: 8px 0;
  font-size: 14px;
}

.action-area {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  background: #f5f5f5;
  border-radius: 8px;
}

.action-area .ant-btn {
  margin: 0 12px;
}

@media (max-width: 768px) {
  .lakala-content {
    grid-template-columns: 1fr;
  }
}
</style>
